<html>
<head>
<!-- Required Libraries -->
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.7.1/modernizr.min.js"></script>

<!-- Load Menu Specific Files -->
<script src="compactmenu.js"></script>
<link rel="stylesheet" type="text/css" href="compactmenu.css" />

<script>

    $(function() {
					$("#menu1").menu({
						transition: 'inside-slide-fade-left'
					}); 
					 
					$("#menu2").menu({
						theme: 'theme-theme2'
					}); 
					 
					$("#menu3").menu({
						theme: 'theme-theme3',
						transition: 'set3'
					}); 
    });
</script>
</head>
<body>
  <h2>Demo 1</h2>

  <div class="container" style="width: 200px;">
    <div id="menu1">
      <div class="compactanchor">
        <a href="#">Anchor Text</a>
      </div>

      <ul>
        <li>
          <a href="#">Explore DD</a>

          <ul>
            <li><a href="http://www.dynamicdrive.com/">Home</a></li>

            <li><a href="http://www.dynamicdrive.com/new.htm">New Scripts</a></li>

            <li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>

            <li><a href="http://www.dynamicdrive.com/style/">CSS Library</a></li>

            <li><a href="http://tools.dynamicdrive.com">Tools</a></li>
          </ul>
        </li>

        <li><a href="#">Link Text</a></li>

        <li>
          <a href="#">Link Text</a>

          <ul>
            <li><a href="#">Sub Link Text</a></li>

            <li><a href="#">Sub Link Text</a></li>

            <li>
              <a href="#">Sub Link Text</a>

              <ul>
                <li><a href="#">Sub Link Text 1 - Sub</a></li>

                <li><a href="#">Sub Link Text 1 - Sub</a></li>

                <li><a href="#">Sub Link Text 1 - Sub</a></li>
              </ul>
            </li>
          </ul>
        </li>

        <li>
          <a href="#">Link Text 2</a>

          <ul>
            <li><a href="#">Sub Link Text 2</a></li>

            <li><a href="#">Sub Link Text 2</a></li>

            <li><a href="#">Sub Link Text 2</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>

  <h2>Demo 2</h2>

  <div class="container" style="width: 200px;">
    <div id="menu2">
      <div class="compactanchor">
        Compact Menu
      </div>

      <ul>
        <li>
          <a href="#">Explore DD</a>

          <ul>
            <li><a href="http://www.dynamicdrive.com/">Home</a></li>

            <li><a href="http://www.dynamicdrive.com/new.htm">New Scripts</a></li>

            <li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>

            <li><a href="http://www.dynamicdrive.com/style/">CSS Library</a></li>

            <li><a href="http://tools.dynamicdrive.com">Tools</a></li>
          </ul>
        </li>

        <li><a href="#">Link Text</a></li>

        <li>
          <a href="#">Link Text</a>

          <ul>
            <li><a href="#">Sub Link Text</a></li>

            <li><a href="#">Sub Link Text</a></li>

            <li>
              <a href="#">Sub Link Text</a>

              <ul>
                <li><a href="#">Sub Link Text 1 - Sub</a></li>

                <li><a href="#">Sub Link Text 1 - Sub</a></li>

                <li><a href="#">Sub Link Text 1 - Sub</a></li>
              </ul>
            </li>
          </ul>
        </li>

        <li>
          <a href="#">Link Text 2</a>

          <ul>
            <li><a href="#">Sub Link Text 2</a></li>

            <li><a href="#">Sub Link Text 2</a></li>

            <li><a href="#">Sub Link Text 2</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>

  <h2>Demo 3</h2>

  <div class="container" style="width: 200px;">
    <div id="menu3">
      <div class="icon compactanchor">
        Icon
      </div>

      <ul>
        <li>
          <a href="#">Explore DD</a>

          <ul>
            <li><a href="http://www.dynamicdrive.com/">Home</a></li>

            <li><a href="http://www.dynamicdrive.com/new.htm">New Scripts</a></li>

            <li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>

            <li><a href="http://www.dynamicdrive.com/style/">CSS Library</a></li>

            <li><a href="http://tools.dynamicdrive.com">Tools</a></li>
          </ul>
        </li>

        <li><a href="#">Link Text</a></li>

        <li>
          <a href="#">Link Text</a>

          <ul>
            <li><a href="#">Sub Link Text</a></li>

            <li><a href="#">Sub Link Text</a></li>

            <li>
              <a href="#">Sub Link Text</a>

              <ul>
                <li><a href="#">Sub Link Text 1 - Sub</a></li>

                <li><a href="#">Sub Link Text 1 - Sub</a></li>

                <li><a href="#">Sub Link Text 1 - Sub</a></li>
              </ul>
            </li>
          </ul>
        </li>

        <li>
          <a href="#">Link Text 2</a>

          <ul>
            <li><a href="#">Sub Link Text 2</a></li>

            <li><a href="#">Sub Link Text 2</a></li>

            <li><a href="#">Sub Link Text 2</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</body>
<html>